<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>系统检测系统</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="wjjs/css/headercss.css">
    <script src="wjjs/js/headroom.js"></script>


    <script src="wjjs/js/jquery.min.js"></script>


    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="wjjs/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="wjjs/css/demo.css" />
    <link rel="stylesheet" type="text/css" href="wjjs/css/component.css" />
    <link rel="stylesheet" type="text/css" href="wjjs/css/content.css" />
    <link rel="stylesheet" type="text/css" href="wjjs/css/style.css" />

    <script src="wjjs/js/modernizr.custom.js"></script>
    <script src="wjjs/js/classie.js"></script>
    <script src="wjjs/js/uiMorphingButton_fixed.js"></script>

    <meta name="description" content="">
</head>
<body>
<div class="container" id="mydiv"style="height: 200px;">
<header id="header" class="header header--fixed hide-from-print" role="banner">
    <div>系统检测系统</div>
</header>

<article>

<div class="main">系统检测系统</div>

    <!-- <p>点击下面按钮展示 <strong>悬浮对话框</strong>:</p> -->
    <div class="mockup-content">
        <p>Pea horseradish azuki bean lettuce avocado asparagus okra.</p>
        <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
            <button type="button">登录</button>
            <div class="morph-content">
                <div>
                    <div class="content-style-form content-style-form-1">
                        <span class="icon icon-close">退出</span>
                        <h2>登录</h2>
                        <form  action="/"  method="post" id="abc">
                            <p><label>手机号:</label><input name="username" type="text" /></p>
                            <p><label>输入密码:</label><input name="pws" type="password" /></p>
                            <p><button onclick="document.getElementById('abc').submit();" type="submit">登录</button></p>
                            <!-- <p><button type="submit">登录</button></p> -->
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- morph-button -->
        <strong class="joiner">或</strong>
        <div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
            <button type="button">注册</button>
            <div class="morph-content">
                <div>
                    <div class="content-style-form content-style-form-2">
                        <span class="icon icon-close">退出</span>
                        <h2>注册</h2>
                        <form>
                            <p><label>电子邮件</label><input type="text" /></p>
                            <p><label>输入密码</label><input type="password" /></p>
                            <p><label>重复密码</label><input type="password" /></p>
                            <p><button>注册</button></p>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- morph-button -->
        <p>Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong.</p>
    </div><!-- /form-mockup -->







    <a class="btt btn btn--plain hide-from-print" href="#" id="btt"><!--Top <i class="icon icon--up"></i>--></a>
</article>


</div>
<!--页面底部-->
<div class="food"><a>关于我们</a>  |  <a>欢迎合作</a>  |  <a>诚聘英才</a>  |  <a>知识产权</a>  |  <a>客服中心</a></div>





<script>
    var mydiv=document.getElementById("mydiv");

    var mydiv_resize=function(){
        mydiv.style.width=window.innerWidth+"px";

        mydiv.style.height=window.innerHeight-100+"px";

    }
    mydiv_resize();
    window.onresize=mydiv_resize;
    (function() {
        var docElem = window.document.documentElement, didScroll, scrollPosition;

        // trick to prevent scrolling when opening/closing button
        function noScrollFn() {
            window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
        }

        function noScroll() {
            window.removeEventListener( 'scroll', scrollHandler );
            window.addEventListener( 'scroll', noScrollFn );
        }

        function scrollFn() {
            window.addEventListener( 'scroll', scrollHandler );
        }

        function canScroll() {
            window.removeEventListener( 'scroll', noScrollFn );
            scrollFn();
        }

        function scrollHandler() {
            if( !didScroll ) {
                didScroll = true;
                setTimeout( function() { scrollPage(); }, 60 );
            }
        };

        function scrollPage() {
            scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
            didScroll = false;
        };

        scrollFn();

        [].slice.call( document.querySelectorAll( '.morph-button' ) ).forEach( function( bttn ) {
            new UIMorphingButton( bttn, {
                closeEl : '.icon-close',
                onBeforeOpen : function() {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterOpen : function() {
                    // can scroll again
                    canScroll();
                },
                onBeforeClose : function() {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterClose : function() {
                    // can scroll again
                    canScroll();
                }
            } );
        } );

        // for demo purposes only
        [].slice.call( document.querySelectorAll( 'form button' ) ).forEach( function( bttn ) {
            bttn.addEventListener( 'click', function( ev ) { ev.preventDefault(); } );
        } );
    })();
</script>






<script>
    (function() {
        var header = new Headroom(document.querySelector("#header"), {
            tolerance: 5,
            offset : 205,
            classes: {
                initial: "animated",
                pinned: "slideDown",
                unpinned: "slideUp"
            }
        });
        header.init();

        var bttHeadroom = new Headroom(document.getElementById("btt"), {
            tolerance : 0,
            offset : 500,
            classes : {
                initial : "slide",
                pinned : "slide--reset",
                unpinned : "slide--down"
            }
        });
        bttHeadroom.init();
    }());
</script>


</body>
</html>
